<template>
	<view v-if="err" style="padding-top: 220rpx;">
		<fui-result type="fail" title="操作失败" :descr="err">
			<fui-button @click="$reLaunch('index/index')" width="400rpx" height="84rpx" text="返回主页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
		</fui-result>
	</view>
	<view class="fui-wrap" v-if="union">
		<view class="detail-box" :style="safebottom?`margin-bottom: 40rpx;`:`margin-bottom: 20rpx;`">
			<fui-section title="订单详情" isLine :size="32" :padding="['40rpx','0rpx']"></fui-section>
			<view class="info" :style="`background-image:url(${baseUrl}assets/img/parkbg.jpg);background-size:100%;`">
				<fui-text :text="union.order_type=='parking'?records.parking_title:parking.title" color="#000000" :size="36"></fui-text>
				<fui-tag style="margin: 20rpx 0;" :text="union.order_type_text" type="success"></fui-tag>
				<fui-text :text="'￥'+parseNumber(union.pay_price)" color="#11c117" :size="42" fontWeight="800"></fui-text>
				<fui-tag  v-if="!union.invoicing" text="可开票" type="danger" theme="light"></fui-tag>
			</view>
			<view class="line">
				<fui-text text="订单号：" color="#aaaaaa" :size="28"></fui-text>
				<view style="display: flex;">
					<fui-text :text="union.out_trade_no" color="#000" :size="28" style="margin-right: 10rpx;"></fui-text>
					<fui-button text="复制" @click="copytradeno" :size="24" background="#fff" color="#43afe8" borderColor="#43afe8" width="80rpx" height="40rpx"></fui-button>
				</view>
			</view>
			<view class="line">
				<fui-text text="支付时间：" color="#aaaaaa" :size="28"></fui-text>
				<fui-text :text="union.pay_time" color="#000" :size="28"></fui-text>
			</view>
			<block v-if="union.order_type=='parking'">
				<view class="line">
					<fui-text text="车牌号：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="records.plate_number" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="入场时间：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="formatDateTime(records.entry_time)" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="停车时长：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="formatDuration(records.parking_time)" color="#000" :size="28"></fui-text>
				</view>
				<view class="line" v-if="records.activities_fee>0">
					<fui-text text="优惠金额：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="'￥'+parseNumber(records.activities_fee)" color="#000" :size="28"></fui-text>
				</view>
				<view class="line" v-if="records.detail.length>1">
					<fui-text text="收费详情：" color="#aaaaaa" :size="28"></fui-text>
					<view class="detail">
						<fui-text v-for="(item,index) in records.detail" :text="item.start_time+' 到 '+item.end_time+' 收费￥'+parseNumber(item.fee)" :key="index" color="#aaaaaa" :size="28" block></fui-text>
					</view>
				</view>
			</block>
			<block v-if="union.order_type=='parking_monthly'">
				<view class="line">
					<fui-text text="车牌号：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="recharge.plate_number" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="开始时间：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="formatDate(recharge.starttime)" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="结束时间：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="formatDate(recharge.endtime)" color="#000" :size="28"></fui-text>
				</view>
			</block>
			<block v-if="union.order_type=='parking_stored'">
				<view class="line">
					<fui-text text="车牌号：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="stored.plate_number" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="充值前金额：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="'￥'+parseNumber(stored.before)" color="#000" :size="28"></fui-text>
				</view>
				<view class="line">
					<fui-text text="充值后余额：" color="#aaaaaa" :size="28"></fui-text>
					<fui-text :text="'￥'+parseNumber(stored.after)" color="#000" :size="28"></fui-text>
				</view>
			</block>
			<view class="bottom">
				<fui-button @click="$navigateTo('index/invoice?pay_id='+union.id)" v-if="!union.invoicing" text="申请开票" width="170rpx" height="60rpx" :margin="['0rpx','20rpx','0rpx','0rpx']"></fui-button>
				<fui-button @click="gokefu" text="联系客服" width="170rpx" height="60rpx" :margin="['0rpx','20rpx','0rpx','0rpx']"></fui-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {formatDuration,parseNumber,formatDateTime} from '@/utils/util.js'
	export default {
		data() {
			return {
				baseUrl:baseUrl,
				err:'',
				union:'',
				records:'',
				recharge:'',
				stored:'',
				parking:'',
				serialno:'',
				safebottom:0
			}
		},
		onLoad(e) {
			this.serialno=e.serialno || '';
			this.getDetail(e.out_trade_no);
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom;
			  }
			});
		},
		methods: {
			...methods,
			formatDuration,
			parseNumber,
			copytradeno:function(){
				uni.setClipboardData({
					data:this.union.out_trade_no
				});
			},
			gokefu:function(){
				this.$navigateTo('index/kefu');
			},
			formatDate:function(time){
				return formatDateTime(new Date(time*1000)).slice(0,10);
			},
			formatDateTime:function(time){
				return formatDateTime(new Date(time*1000)).slice(0,16);
			},
			getDetail:function(out_trade_no){
				this.$get('orders/detail',{out_trade_no:out_trade_no},true).then(res=>{
					this.union=res.union;
					this.records=res.records;
					this.recharge=res.recharge;
					this.parking=res.parking;
					this.stored=res.stored;
				}).catch(e=>{
					this.err=e.msg;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.bottom{
	width: 100%;
	background-color: #fff;
	display: flex;
	justify-content: flex-end;
	margin-top:20rpx;
}
.ad-box{
	width: 95%;
	margin: 0 auto;
	border-radius: 8rpx;
	background-color: #fff;
	margin-top: 20rpx;
}
.detail-box{
	width: 90%;
	margin: 0 auto;
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 8rpx;
	padding: 20rpx;
	padding-top: 0;
	overflow-y: scroll;
	.info{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-bottom: 1px solid #ebebeb;
		padding: 20rpx 0;
		border-radius: 8rpx;
	}
	.line{
		display: flex;
		margin-top: 30rpx;
		justify-content: space-between;
		flex-wrap: wrap;
		.detail{
			margin-top: 20rpx;
		}
	}
}
</style>